<template>
    <div class="custom-page-def">
        <a-form-model layout="vertical" :model="config">
            <a-form-model-item label="页面定制">
                <rx-input-button v-model="config.customName" @click="selectChart"></rx-input-button>
            </a-form-model-item>
            <a-checkbox class="formChenckbox" v-model="config.showName">标题展示</a-checkbox>
            <a-form-model-item :label="$ti18('rxList.title','标题')">
                <a-input  v-model="config.name"></a-input>
            </a-form-model-item>
            <a-form-model-item label="传入参数">
                <a-button-group style="margin-bottom: 5px;">
                    <a-button class="abutton" @click="addParams">
                        <i class="iconjia iconfont"></i>
                    </a-button>
                    <a-button class="abutton" @click="delParams">
                        <i class="icontrash iconfont"></i>
                    </a-button>
                </a-button-group>
                <a-table
                    :dataSource="config.params"
                    :pagination="false"
                    :rowSelection="receiveRowSelection"
                    rowKey="idx_"
                    :columns="columns"
                    :bordered="true"
                >
                    <span slot="inParameterTitle"><span style="color: red;" >*</span>传入参数</span>
                    <span slot="receiveParametersTitle"><span style="color: red;" >*</span>接收参数</span>
                    <template slot="inParameter" slot-scope="text, record,index">
                        <a-select :getPopupContainer="p=>p.parentNode" v-model="record.inParameter">
                            <a-select-option v-for="item in inParameterList" :value="item.value">
                                {{item.label}}
                            </a-select-option>
                        </a-select>
                    </template>
                    <template slot="receiveParameters" slot-scope="text, record,index">
                        <a-select :getPopupContainer="p=>p.parentNode" v-model="record.receiveParameters">
                            <a-select-option v-for="item in receiveList" :value="item.value">
                                {{item.label}}
                            </a-select-option>
                        </a-select>
                    </template>
                </a-table>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import {GridMixin,RxInputButton,Util,Dialog} from "@lowcode/jpaas-common-lib"
import ComponentDef from './ComponentDef'
export default {
    name: "CustomPageDef",
    mixins: [GridMixin, ComponentDef],
    components: {
        RxInputButton
    },
    data(){
        return{
            config: {
                alias: Util.randomId(),
                name: '页面定制' + Util.randomId(),
                custom:{},
                customName:'',
                showName:true,
                params:[]
            },
            columns:[
                {
                    dataIndex: 'receiveParameters',
                    key: 'receiveParameters',
                    slots: { title: 'receiveParametersTitle' },
                    scopedSlots: { customRender: 'receiveParameters' }
                },
                {
                    dataIndex: 'inParameter',
                    key: 'inParameter',
                    slots: { title: 'inParameterTitle' },
                    scopedSlots: { customRender: 'inParameter' },
                },
            ],
            receiveList:[],//接收参数
            inParameterList:[],//传入参数
            selectedRowKeys:[]
        }
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            if (this.conf) {this.config = this.conf;}
            this.inParameterList = this.mdl.params? JSON.parse(this.mdl.params):[];
            this.receiveList=this.config.custom.params?JSON.parse(this.config.custom.params):[]

        },
        selectChart(){
            let self_ = this;
            let config={
                zIndex:99999,
                curVm: this, widthHeight: ['900px', '600px'],
            };
            Dialog.openCustomPageDialog(config,(res)=>{
                if(this.mdl.alias && this.mdl.alias === res.alias){
                    this.$message.error('请不要选择相同的页面定制');
                    return
                }
                self_.config.customName = JSON.stringify({value:res.id,text:this.$i18(res.name)})
                self_.config.custom = res;
                self_.receiveList=self_.config.custom.params?JSON.parse(self_.config.custom.params):[]
            });
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        addParams(){
            if(!this.config.params){
                this.config.params = []
            }
            if(this.config.params.length>=this.receiveList.length){
                this.$message.error('不可以添加重复的参数');
                return
            }
            this.config['params'].push({
                idx_: Util.randomId(),
                inParameter:"",
                receiveParameters:""
            })
        },
        delParams(){
            this.removeRows(this.config.params, this.selectedRowKeys)
        },
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                var self=this;
                setTimeout(()=>{  //设置延迟执行
                    self.$emit('dragclick',val, "", self.type);
                },1000);
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.custom-page-def{
    padding: 0 10px;
}
</style>